<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-10 14:31:17
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-20 11:04:51
 * @FilePath: /huizhou_website/src/components/header_index.vue
-->
<template>
  <div class="header_boxs"
    :class="bgWhite">
    <div class="header"
      :class="isPhone === 'true'?'height_mobile':''">
      <div class="logo"
        v-if="isPhone === 'true'">
        <span
          @click="routerPage(0)">
          <img
            src="../assets/imgaes/logo.png"
            class="logo_img">
        </span>
      </div>
      <div class="nav_boxs">
        <div class="logo"
          v-if="isPhone === 'false'"
          style="margin-right: 30px;">
          <span
            @click="routerPage(0)">
            <img
              src="../assets/imgaes/logo.png"
              class="logo_img">
          </span>
        </div>
        <div class="web_menu"
          v-if="isPhone === 'false'">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            text-color="#444444"
            active-text-color="#4774b7"
            background-color="#ffffff"
            @select="handleSelect">
            <template
              v-for="(item,i) in menuList">
              <template
                v-if="item.children.length == 0">
                <el-menu-item
                  :index="item.path"
                  @click="gotoPage(item,i)"
                  :key="i">{{ item.name }}</el-menu-item>
              </template>
              <template
                v-else>
                <el-submenu
                  :key="i"
                  class="sub_menu"
                  :index="item.path">
                  <template
                    slot="title">{{ item.name }}</template>
                  <el-menu-item
                    v-for="(child,j) in item.children"
                    :index="child.path"
                    @click="gotoPage(child,i,j)"
                    :key="j">{{ child.name }}</el-menu-item>
                </el-submenu>
              </template>
            </template>

          </el-menu>
        </div>
        <ul class="web_menu"
          v-else>
          <li
            class="web_menu_item"
            :class="{'nav_active':isActive== index}"
            v-for="(item,index) in menuList"
            :key="index">
            <div
              v-if="item.children.length == 0"
              @click="routerPage(index,item)">
              {{item.name}}
            </div>
            <div v-else
              class="second_menu_box"
              :class="{'open_nav':open_nav == index}"
              @mouseleave="mouseleave(index)"
              @mouseover="mouseover(index)">
              {{item.name}}
              <i class="el-icon-arrow-down"
                style="font-size:12px;"></i>
              <ul
                class="second_menu"
                :style="{'top':top + 'px'}">
                <li
                  class="second_li"
                  @click="gotoPage(k,index,j)"
                  v-for="(k,j) in item.children"
                  :key='j'>
                  <span>{{k.name}}</span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="mobile_icon">
        <i class="el-icon-s-fold"
          style="color: #333333;"
          v-if="!openMobile"
          @click="open"></i>
        <i class="el-icon-close"
          style="color: #333333;"
          v-else
          @click="close"></i>
        <div
          class="mobile_menu"
          :class="openMobile">
          <div
            class="menu_item"
            v-for="(item,index) in menuList"
            :key="index">
            <div
              @click="routerPage(index,item)"
              v-if="item.children.length == 0"
              class="menu_title">
              {{item.name}}
            </div>
            <template v-else>
              <div
                @click="openNaves(index)"
                class="menu_title">
                {{item.name}}
                <i
                  class="down el-icon-caret-bottom"></i>
              </div>
              <div
                class="menu_second"
                :class="{'open_navs':open_navs == index}">
                <div
                  class="menu_second_item"
                  @click="gotoPage(k,index,j)"
                  v-for="(k,j) in item.children"
                  :key="j">
                  {{k.name}}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      activeIndex: '/',
      isActive: 0,
      open_nav: 0,
      isPhone: false,
      open_navs: 0,
      bgWhite: '',
      openMobile: '',
      scrollTop: 0,
      top: '',
      menuList: [],
      openNav: []
    }
  },
  watch: {
    $route: {
      handler: function (val) {
        console.log(val)
        this.activeIndex = val.path
        this.$store.commit('setPathIndex', val.path)
      }
    }
  },
  created() {
    this.getMent()
  },
  mounted() {
    if (this.$store.state.index && this.$route.path !== '/') {
      this.activeIndex = this.$store.state.index
    } else {
      // this.activeIndex = '/'
      this.activeIndex = '/'
      this.$store.commit('setPathIndex', '/')
    }
    this.isPhone = window.localStorage.getItem('isPhone')
    window.addEventListener('scroll', this.getHtmlBodyHeight)
    this.getMent()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      this.activeIndex = key
      this.$store.commit('setPathIndex', key)
      this.$router.push(keyPath)
    },
    routerPage(index) {
      this.openMobile = ''
      this.$store.commit('setOpenNav', [index, 0])
      this.isActive = index
      if (index == 0) {
        this.$router.push('/')
        this.$store.commit('setPathIndex', '/')
      }
      this.goTop()
    },
    gotoPage(k, index, j) {
      this.openMobile = ''

      this.open_navs = 0
      this.$store.commit('setOpenNav', [index, j])
      this.isActive = index
      this.$store.commit('setPathIndex', k.path)
      this.$router.push(k.path)
      // if (index == 1) {
      //   if (j == 0) this.$router.push('/company_profile')
      //   else if (j == 1) this.$router.push('/development_history')
      //   else if (j == 2) this.$router.push('/management_team')
      //   else if (j == 3) this.$router.push('/leadership_care')
      // } else if (index == 2) {
      //   if (j == 0) this.$router.push('/highway_project')
      //   else if (j == 1) this.$router.push('/government_project')
      //   else if (j == 2) this.$router.push('/bridge_project')
      //   else if (j == 3) this.$router.push('/tunnel_project')
      //   else if (j == 4) this.$router.push('/intellectualization')
      // } else if (index == 3) {
      //   if (j == 0) this.$router.push('/professional_qualification')
      //   else if (j == 1) this.$router.push('/certificate_of_honor')
      //   else if (j == 2) this.$router.push('/technological_innovation')
      // } else if (index == 4) {
      //   if (j == 0) this.$router.push('/project_way_index')
      //   else if (j == 1) this.$router.push('/project_government')
      //   else if (j == 2) this.$router.push('/investment_business')
      //   else if (j == 3) this.$router.push('/engineering_inspection')
      // } else if (index == 5) {
      //   if (j == 0) this.$router.push('/cultural_concept')
      //   else if (j == 1) this.$router.push('/safe_production')
      //   else if (j == 2) this.$router.push('/craftsman_spirit')
      // } else if (index == 6) {
      //   if (j == 0) this.$router.push('/industry_news')
      //   else if (j == 1) this.$router.push('/company_news')
      //   else if (j == 2) this.$router.push('/party_building')
      //   else if (j == 3) this.$router.push('/video_news')
      //   else if (j == 4) this.$router.push('/shape')
      // } else if (index == 7) {
      //   if (j == 0) this.$router.push('/job_recruitment')
      //   else if (j == 1) this.$router.push('/people_develoment')
      //   else if (j == 2) this.$router.push('/team_building')
      // }
      this.goTop()
    },
    getMent() {
      console.log(112)

      axios.post('/home/project', {}).then(res => {
        console.log(12)
        this.menuList = res.data.data.projectList
        console.log(this.menuList, '0000')
        // this.menuList.map((item, index) => {
        //   if (index === 6) {
        //     const obj = {
        //       createTime: '2020-09-24 10:48:13',
        //       id: '6708373832316489729',
        //       isEnable: 0,
        //       name: '闽交品牌',
        //       parentId: '6708371846066081792',
        //       register: '二级',
        //       remark: '闽交品牌',
        //       sort: 4
        //     }
        //     const obj1 = {
        //       createTime: '2020-09-24 10:48:13',
        //       id: '6708373832316489730',
        //       isEnable: 0,
        //       name: '媒体聚焦',
        //       parentId: '6708371846066081792',
        //       register: '二级',
        //       remark: '媒体聚焦',
        //       sort: 4
        //     }
        //     item.children.push(obj, obj1)
        //   }
        // })
        this.$store.commit('setNavList', this.menuList)
      })
    },
    mouseover(e) {
      this.open_nav = e
    },
    mouseleave() {
      this.open_nav = 0
    },
    openNaves(index) {
      this.open_navs = index
    },
    open() {
      this.openMobile = 'open_mobile'
    },
    close() {
      this.openMobile = ''
    },
    getHtmlBodyHeight() {
      //获取滚动时的高度
      const openNav = this.$store.state.openNav
      if (openNav[0] == 0) {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (this.scrollTop < 430) {
          this.top = 430 - this.scrollTop - 30
        } else {
          this.bgWhite = ''
        }
      }
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style>
.second_menu {
  height: 0 !important;
  overflow: hidden;
  opacity: 1 !important;
}
.el-menu-item:hover,
.el-submenu__title:hover {
  background: #4774b7 !important;
  color: #fff !important;
}
/* .sub_menu.el-submenu.is-active .el-submenu__title {
  background: #4774b7 !important;
  color: #fff !important;
} */
</style>